<template>
    <el-button :type="color" :plain="plain" :round="round" style="padding: 0 6px;font-size: 14px;">
        <flexBox gap="4px" :justify-content="align" :style="{
            width: insideWidth == '' ? 'max-content' : insideWidth
        }">
            <cIcon v-if="leftIcon && showLeftIcon" :name="leftIcon"></cIcon>
            <cIcon v-if="leftIcon && !showLeftIcon" :name="leftIcon"></cIcon>
            <slot></slot>
            <cIcon v-if="rightIcon && showRightIcon" :name="rightIcon"></cIcon>
            <cIcon v-if="rightIcon && !showRightIcon" :name="rightIcon"></cIcon>
        </flexBox>
    </el-button>
</template>

<script setup>
import { ref, reactive, defineProps, computed, watch, onMounted, onBeforeUnmount } from 'vue';
import cIcon from './cIcon.vue';
import flexBox from './flexBox.vue';
import tool from '../modules/tool'

const props = defineProps({
    leftIcon: {
        type: String,
        default: ''
    },
    rightIcon: {
        type: String,
        default: ''
    },
    align: {
        type: String,
        default: 'center'
    },
    insideWidth: {
        type: String,
        default: ''
    },
    round: {
        type: Boolean,
        default: false
    },
    plain: {
        type: Boolean,
        default: false
    },
    color: {
        type: String,
        default: ''
    }
})

const showLeftIcon = ref(true)
const showRightIcon = ref(true)

watch(() => props.leftIcon, async (to, from) => {
    showLeftIcon.value = false
    await tool.wait(0.005)
    showLeftIcon.value = true
})

watch(() => props.rightIcon, async (to, from) => {
    showRightIcon.value = false
    await tool.wait(0.005)
    showRightIcon.value = true
})

onMounted(async () => {

})
</script>

<style scoped></style>